@bg-color:#b7d4a8;

// 清楚默认样式
*{
	margin: 0;
	padding: 0;
	// 改变盒子模型的计算方式
	box-sizing:border-box;
}

body{
	font: bold 20px "Courier";
}

// 设置主窗口的样式
#main{
	width: 360px;
	height: 420px;
	background-color: @bg-color;
	margin: 100px auto;
	border:10px solid black;
	border-radius: 20px;
	// 开启弹性盒模型
	display: flex;
	// 设置主轴方向
	flex-direction: column;
	// 设置侧轴的对齐方式
	align-items: center;
	// 设置主轴的对齐方式
	justify-content: space-around;
	
	// 游戏舞台
	#stage{
		width: 304px;
		height: 304px;
		border: 2px solid black;
		position: relative;
		
		// 设置蛇的样式
		#snake{
			&>div{
				width: 10px;
				height: 10px;
				background-color: black;
				border: 1px solid @bg-color;
				position: absolute;
			}
		}
		
		// 设置食物
		&>#food{
			width: 10px;
			height: 10px;
			position: absolute;
			left: 40px;
			top: 100px;
			display: flex;
			flex-flow: wrap;
			justify-content: space-between;
			align-content: space-between;
			&>div{
				width: 4px;
				height: 4px;
				background-color: black;
				transform: rotate(45deg);
			}
		}
	}
	
	// 积分牌
	#score-panel{
		width: 300px;
		display: flex;
		justify-content: space-between;
	}
	
}